<style>
    .avatars{
        width: 60px;
        border-radius: 50%;
        height: 60px;
    }
    .flex{
        display: flex;
    }
    .bar{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #avatarHr{
        width:50px;
        height:2px;
        background-color:#d9d9d9;
        margin-top:30px;
    }
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">


    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('客户名称')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" class="form-control" data-rule="required" name="row[name]" type="text" value="">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('联系方式')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-phone" class="form-control" data-rule="required" name="row[phone]" type="text" value="">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('联系地址')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-site" class="form-control" data-rule="required" name="row[site]" type="text" value="">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('业务目标')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea name="row[goal]" data-rule="required" rows="10" cols="67"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('背景资料')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea name="row[background]" rows="10" cols="67"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('负责人')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-principal" class="form-control" name="row[principal]" type="text" value="">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('负责人职务')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-post" class="form-control" name="row[post]" type="text" value="">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('负责人电话')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-mobile" class="form-control" name="row[mobile]" type="text" value="">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('经办人')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-agent" class="form-control" name="row[agent]" type="text" value="">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('经办人职务')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-posts" class="form-control" name="row[posts]" type="text" value="">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('经办人电话')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-mobiles" class="form-control" name="row[mobiles]" type="text" value="">
        </div>
    </div>

    <div style="border-top: 1px solid #93a1a1; padding-top: 10px; margin-right: 20px;box-sizing: border-box">
        <!--<h3 class="title" style="color: red;padding-left:20px">评论:</h3>-->
    </div>


    <div id="wuping" class="form-group">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><h4>沟通记录(1)</h4></label>
            <div class="col-xs-12 col-sm-8">
                <!--<input id="c-1" class="form-control" data-rule="required" name="row[purpose]" type="text" value="">-->
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('沟通时间')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-time" class="form-control datetimepicker"  data-rule="required"  name="row[time][]" type="text" value="" autocomplete="off" data-date-use-current="false" data-date-format="YYYY-MM-DD">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('重要信息')}:</label>
            <div class="col-xs-12 col-sm-8">
                <textarea name="row[message][]" data-rule="required" rows="10" cols="67"></textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('结果及异')}:</label>
            <div class="col-xs-12 col-sm-8">
                <textarea name="row[results][]" data-rule="required" rows="10" cols="67"></textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('应对方案')}:</label>
            <div class="col-xs-12 col-sm-8">
                <textarea name="row[solution][]" data-rule="required" rows="10" cols="67"></textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('备注')}:</label>
            <div class="col-xs-12 col-sm-8">
                <textarea name="row[msg][]" data-rule="required" rows="10" cols="67"></textarea>
            </div>
        </div>

    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <input class="btn btn-sm btn-success btn-append" type="button" id="new" value="增加沟通记录" />
        </div>
    </div>

    <div style="border-top: 1px solid #93a1a1; padding-top: 10px; margin-right: 20px;box-sizing: border-box">
        <!--<h3 class="title" style="color: red;padding-left:20px">评论:</h3>-->
    </div>

    <div class="form-group">
        <label for="c-ids" class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('抄送人')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-ids" data-rule="required" data-live-search="true" multiple class="form-control selectpicker" name="row[ids][]">
                {foreach $arr as $index=>$vo}
                <option value="{$vo.id}">{$vo.nickname}</option>
                {/foreach}
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('审批人')}:</label>
        <div class="col-xs-12 col-sm-8 flex">
            {foreach $examine as $index=>$vo}
            <div class="bar">
                <img class="avatars" src="{$vo.avatar}">
                <h4 class="title nickname">{$vo.nickname}</h4>
            </div>
            {if condition="$index < $count-1"}
            <div id="avatarHr"></div>
            {/if}
            <input type="hidden" name="row[id][]" value="{$vo.id}">
            {/foreach}
        </div>
    </div>




    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

<script src="/assets/img/jquery-3.4.1.min.js"></script>
<script>
    let x = 1;
    $("#new").off("click").on("click",function(){
        //$('#new').click(function(){
        x=x+1;
        //console.log(x);
         let html = `<div class="form-group">
           <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><h4>沟通记录(`+x+`)</h4></label>
            <div class="col-xs-12 col-sm-8">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('沟通时间')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-time-`+x+`" class="form-control datetimepicker"  data-rule="required"  name="row[time][]" type="text" value="" autocomplete="off" data-date-use-current="false" data-date-format="YYYY-MM-DD">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('重要信息')}:</label>
            <div class="col-xs-12 col-sm-8">
                <textarea name="row[message][]" data-rule="required" rows="10" cols="67"></textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('结果及异')}:</label>
            <div class="col-xs-12 col-sm-8">
                <textarea name="row[results][]" data-rule="required" rows="10" cols="67"></textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('应对方案')}:</label>
            <div class="col-xs-12 col-sm-8">
                <textarea name="row[solution][]" data-rule="required" rows="10" cols="67"></textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('备注')}:</label>
            <div class="col-xs-12 col-sm-8">
                <textarea name="row[msg][]" data-rule="required" rows="10" cols="67"></textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"></label>
            <div class="col-xs-12 col-sm-8">
                <input class="btn btn-sm btn-danger btn-remove" type="button" onclick="news23(this)" id="news" value="删除" />
            </div>
        </div>
        </div>`;
         $("#wuping").append(html)
    });
    function news23(that){
         $(that).parent("div").parent("div").parent("div").remove();//指定div元素
        //$(that).remove();//指定tr元素

    }

</script>